const {
  override,
  fixBabelImports,
  addLessLoader,
  addPostcssPlugins,
  useBabelRc
} = require("customize-cra");
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd-mobile",
    style: "css"
  }),
  addLessLoader({
    // Necessary for external CSS imports to work
    // https://github.com/facebookincubator/create-react-app/issues/2677
    ident: "postcss",
    plugins: () => [
      require("postcss-flexbugs-fixes"),
      autoprefixer({
        browsers: [
          ">1%",
          "last 4 versions",
          "Firefox ESR",
          "not ie < 9" // React doesn't support IE8 anyway
        ],
        flexbox: "no-2009"
      })
    ]
  }),
  addPostcssPlugins([
    require("postcss-flexbugs-fixes"),
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009"
      },
      stage: 3
    }),
    pxtorem({
      rootValue: 75, //以100px为准，不同方案修改这里
      propWhiteList: []
    })
  ]),
  useBabelRc()
);
